<template>
  <view class="container">
    <view class="body" v-for="item in list" :key="item.id" @click="godetail(item)">
      <text style="font-weight: 700">{{ item.places == 1 ? '室内活动' : '室外活动' }}</text>
      <view class="center">
        <image class="one" :src="img_url + item.images" mode="aspectFill"></image>
        <view class="right">
          <text style="font-weight: bold; font-size: 28rpx; color: #151515">{{ item.title }}</text>
          <view class="num">
            <image class="two" src="@/static/myimg/a12.png"></image>
            <text style="font-weight: 400; font-size: 24rpx; color: #151515">{{ item.num }}人</text>
            <view class="color">
              <image src="@/static/myimg/a11.png" style="width: 56rpx; height: 24rpx; vertical-align: middle"></image>
              <text style="font-weight: 400; font-size: 20rpx; color: #ffffff">{{ item.girl_num }}</text>
            </view>
            <view class="color" style="margin-left: 10rpx">
              <image src="@/static/myimg/a10.png" style="width: 56rpx; height: 24rpx; vertical-align: middle"></image>
              <text style="font-weight: 400; font-size: 20rpx; color: #ffffff">{{ item.male_num }}</text>
            </view>
          </view>
          <view class="num">
            <image class="two" src="@/static/myimg/a12.png" style="vertical-align: top"></image>
            <text class="text_0">{{ item.acttime + ' ' + item.week }}</text>
          </view>
          <view class="num">
            <image class="two" src="@/static/myimg/a12.png" style="vertical-align: top"></image>
            <text class="text_0" style="width: 355rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical">
              {{ item.address }}
            </text>
          </view>
        </view>
      </view>
      <view style="border: 1rpx solid #e8e8e8; margin: 20rpx 0"></view>
      <view class="bottom">
        <view class="left">
          <image :src="img_url + item.avatar" :key="item2.id" v-for="item2 in item.userlist" style="margin-left: -20rpx" />

          <text style="margin-left: 20rpx; font-weight: 400; font-size: 24rpx; color: #666666">报名中{{ item.join_num + '/' + item.num }}</text>
        </view>
        <view
          class="right"
          style="background-color: #feff01; font-weight: 500; font-size: 28rpx; color: #151515"
          @click.stop="godetail(item)"
          v-if="item.is_report == 0 && item.is_entry == 0"
        >
          查看详情
        </view>
        <view v-if="item.is_entry == 1" style="width: 160rpx; height: 60rpx; background: #cccfdb; border-radius: 20rpx 20rpx 20rpx 20rpx; text-align: center; line-height: 60rpx">
          已参与
        </view>
        <view
          v-if="item.is_report == 1 && item.is_entry == 0"
          style="width: 160rpx; height: 60rpx; background: #ff3742; border-radius: 20rpx 20rpx 20rpx 20rpx; text-align: center; line-height: 60rpx"
        >
          爆满
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import dayjs from 'dayjs';
export default {
  data() {
    return {
      userid: '',
      list: [],
      page: 1,
      img_url: this.img_url
    };
  },
  async onReachBottom() {
    console.log('触底了');
    this.page++;
    const res = await this.http('/doings/mydoings', {
      page: this.page,
      state: '2',
      user_id: this.userid
    });
    console.log('他人活动', res);

    if (res.data.data.length != 0) {
      res.data.data.forEach((item) => {
        item.acttime = dayjs(item.starttime * 1000).format('MM:DD hh:mm') + '-' + dayjs(item.endtime * 1000).format('MM:DD hh:mm');
        // = new Date(item.starttime * 1000).getDay();
        if (new Date(item.starttime * 1000).getDay() == 0) {
          item.week = '周日';
        } else if (new Date(item.starttime * 1000).getDay() == 1) {
          item.week = '周一';
        } else if (new Date(item.starttime * 1000).getDay() == 2) {
          item.week = '周二';
        } else if (new Date(item.starttime * 1000).getDay() == 3) {
          item.week = '周三';
        } else if (new Date(item.starttime * 1000).getDay() == 4) {
          item.week = '周四';
        } else if (new Date(item.starttime * 1000).getDay() == 5) {
          item.week = '周五';
        } else if (new Date(item.starttime * 1000).getDay() == 6) {
          item.week = '周六';
        }
      });

      this.list.push(...res.data.data);
    } else {
      uni.showToast({
        title: '数据加载完毕',
        icon: 'none'
      });
    }
  },
  onLoad(opt) {
    if (opt.userid) {
      this.userid = opt.userid;
    }
  },
  onShow() {
    this.page = 1;
    this.list = [];
    this.getotheractive();
  },
  methods: {
    // 跳转活动详情
    godetail(item) {
      uni.navigateTo({
        url: '/dynamic/activedetail/activedetail?id=' + item.id
      });
    },
    // 获取他人的活动
    async getotheractive() {
      const res = await this.http('/doings/mydoings', {
        page: this.page,
        state: '2',
        user_id: this.userid
      });
      console.log('他人活动', res);

      this.list = res.data.data.filter((item) => {
        return item.status == 2;
      });
      this.list.forEach((item) => {
        item.acttime = dayjs(item.starttime * 1000).format('MM:DD hh:mm') + '-' + dayjs(item.endtime * 1000).format('MM:DD hh:mm');
        // = new Date(item.starttime * 1000).getDay();
        if (new Date(item.starttime * 1000).getDay() == 0) {
          item.week = '周日';
        } else if (new Date(item.starttime * 1000).getDay() == 1) {
          item.week = '周一';
        } else if (new Date(item.starttime * 1000).getDay() == 2) {
          item.week = '周二';
        } else if (new Date(item.starttime * 1000).getDay() == 3) {
          item.week = '周三';
        } else if (new Date(item.starttime * 1000).getDay() == 4) {
          item.week = '周四';
        } else if (new Date(item.starttime * 1000).getDay() == 5) {
          item.week = '周五';
        } else if (new Date(item.starttime * 1000).getDay() == 6) {
          item.week = '周六';
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  padding: 10rpx 30rpx;
  .body {
    box-sizing: border-box;
    width: 690rpx;
    height: 418rpx;
    background: #fffff1;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 24rpx 16rpx;
    margin: 24rpx 0;
    .center {
      display: flex;

      margin-top: 20rpx;
      .one {
        width: 260rpx;
        height: 168rpx;
        background-color: aqua;
        vertical-align: top;
        border-radius: 12rpx;
        overflow: hidden;
      }
      .right {
        display: inline-block;
        margin-left: 15rpx;
        .num {
          display: flex;
          align-items: center;
          // margin: 10rpx 0;
          .two {
            width: 24rpx;
            height: 24rpx;
            vertical-align: bottom;
          }
          text {
            display: inline-block;
            height: 100%;
            line-height: 40rpx;
            margin: 0 30rpx 0 10rpx;
            // 限制长度
          }
          .text_0 {
            font-size: 24rpx;
            vertical-align: top;
          }
          .color {
            display: inline-block;
            position: relative;
            top: 0;
            left: 0;
            image {
              vertical-align: top;
            }
            text {
              position: absolute;
              right: -22rpx;
              color: #ffffff;
              top: 6rpx;
            }
          }
        }
      }
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      .left {
        image {
          width: 56rpx;
          height: 56rpx;
          border-radius: 28rpx;
          margin-left: -20rpx;
          vertical-align: middle;
        }
      }
      .right {
        width: 160rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;

        border-radius: 20rpx;
      }
    }
  }
}
</style>
